<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="825px"
    :before-close="handleClose">


    <el-form ref="form" class="form" :rules="rules" :model="form" label-width="80px" label-position="top">
      <el-form-item prop="siteName" label="场地名称">
        <el-input :disabled="type === 'view'" v-model="form.siteName"></el-input>
      </el-form-item>
      <el-form-item label="场地编号" prop="labNumber">
        <el-select :disabled="type === 'view'" v-model="form.labNumber" placeholder="请选择">
          <el-option v-for="item in siteList" :label="item.dictValue"
                     :value="item.dictKey"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关联电表" prop="statusDeviceId">
        <el-select :disabled="type === 'view'" v-model="form.statusDeviceId" placeholder="请选择">
          <el-option v-for="item in electricityList" :label="item.deviceName"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="statusDeviceProperty" label="关联电表项">
        <el-select :disabled="type === 'view'" v-model="form.statusDeviceProperty" placeholder="请选择">
          <el-option v-for="item in avoltageList" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="orgId" label="机构">
        <el-cascader
          class="w-100"
          :disabled="type === 'view'"
          :options="orgTree"
          v-model="form.orgId"
          :props="options"
          :show-all-levels="false"
        ></el-cascader>
      </el-form-item>
      <el-form-item prop="camera" label="实验摄像头">
        <el-select :disabled="type === 'view'" v-model="form.camera" placeholder="请选择">
          <el-option v-for="item in cameraList" :label="item.deviceName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="hwCamera" label="红外摄像头">
        <el-select collapse-tags multiple :disabled="type === 'view'" v-model="form.hwCamera" placeholder="请选择">
          <el-option v-for="item in hwList" :label="item.deviceName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="fence" label="电子围栏">
        <el-select collapse-tags multiple :disabled="type === 'view'" v-model="form.fence" placeholder="请选择">
          <el-option v-for="item in fenceList" :label="item.deviceName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <span slot="footer" v-if="['add','edit'].includes(type)" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="handleConfirm">确 定</el-button>
  </span>
  </el-dialog>
</template>
<script>
  import {getAssociatedDb} from "../../../api/platform/devicetable";
  import {
    getAssociatedCamera,
    getDetail,
    getSiteList,
    getFenceList,
    getHwList
  } from "../../../api/platform/sitesettingstable";
  import {getDeptTree} from "../../../api/system/dept";
  import {findName, deepFind} from "../../../util/util";
  import _ from 'lodash'

  export default {
    name: 'add-modal',
    data() {
      return {
        visible: false,
        type: 'add',
        electricityList: [],
        cameraList: [],
        avoltageList: [
          {
            name: 'A项电压',
            value: 'avoltage'
          }, {
            name: 'B项电压',
            value: 'bvoltage'
          }, {
            name: 'C项电压',
            value: 'cvoltage'
          },
        ],
        form: {},
        orgTree: [],
        options: {
          value: 'id',
          label: 'title'
        },
        siteList: [],
        fenceList: [],
        hwList: []
      }
    },
    computed: {
      title() {
        switch (this.type) {
          case "add":
            return '新增';
          case 'edit':
            return '编辑';
          case 'view':
            return '查看'
        }
      },
      rules() {
        return {
          siteName: [{required: true, message: '请输入场地名称'}],
          orgId: [{required: true, message: '请选择机构'}],
          labNumber: [{required: true, message: '请选择场地编号'}],
        }
      }
    },
    methods:{
      handleConfirm(){
        this.$refs.form.validate(valid=>{
          if(valid){
            let data = _.cloneDeep(this.form);
            console.log(data);
            data.cameraDevices = [{
              deviceId: data.camera,
              deviceName: findName(data.camera, this.cameraList, 'id', 'deviceName')

            }]
            data.orgName = deepFind(this.orgTree, o => {
              return o.id === data.orgId[data.orgId.length - 1]
            }).title
            data.statusDeviceName = findName(data.statusDeviceId, this.electricityList, 'id', 'deviceName')
            data.statusDevicePropertyName = findName(data.statusDeviceProperty, this.avoltageList, 'value', 'name')
            data.labNumberName = findName(data.labNumber, this.siteList, 'dictKey', 'dictValue')
            data.orgId = data.orgId.toString()
            if (data.hwCamera && data.hwCamera.length) {
              data.thermalImagery = []
              data.hwCamera.forEach(o => {
                data.thermalImagery.push({
                  deviceId: o,
                  deviceName: findName(o, this.hwList, 'id', 'deviceName')
                })
              })
            }
            if (data.fence && data.fence.length) {
              data.electronicFence = []
              data.fence.forEach(o => {
                data.electronicFence.push({
                  deviceId: o,
                  deviceName: findName(o, this.fenceList, 'id', 'deviceName')
                })
              })
            }
            if (this.type === 'add') {
              this.$emit('rowSave', data, this.handleClose)
            } else {
              this.$emit('rowUpdate', data, 0, this.handleClose)
            }
          }
        })
      },
      showModal() {
        this.visible = true;
        if (this.type !== 'add') {
          this.getDetail()
        }
        this.getDb()
        this.getOrgTree()
        this.getCamera()
        this.getOption()
      },
      getOption() {
        getSiteList().then(res => {
          this.siteList = res.data.data
        })
        getFenceList().then(res => {
          this.fenceList = res.data.data
        })
        getHwList().then(res => {
          this.hwList = res.data.data
        })
      },
      getDetail() {
        getDetail(this.form.id).then(res => {
          console.log(res);
          if (res.data.data.cameraDevices.length) {
            this.$set(this.form, 'camera', res.data.data.cameraDevices[0].deviceId)
          }
        })
      },
      getOrgTree() {
        getDeptTree().then(res => {
          this.orgTree = res.data.data;
        })
      },
      getDb() {
        getAssociatedDb().then(res => {
          this.electricityList = res.data.data;
        })
      },
      getCamera() {
        getAssociatedCamera().then(res => {
          this.cameraList = res.data.data
        })
      },
      handleClose() {
        this.form = {}
        this.visible = false
        this.$refs.form.resetFields()
      },
    }
  }
</script>
<style scoped lang="scss">
  .form {
    display: grid;
    grid-column-gap: 20px;

    grid-template-columns: repeat(3, 1fr);

    .el-select {
      width: 100%;
    }
  }
</style>
